<template>
	<view class="container">
		<image :src="url+hdimg" mode="" class="hdimg"></image>
		<ul class="activityList"  v-if="activityList.length>0">
			<li class="activityItem" v-for="(item, index) in activityList" :key="index">
				<view class="activityTit">
					<view @click="handleactivity(item)">
						<image src="../../static/img/img/name.png"></image>
						{{item.hname}}
					</view>
					<view @click="handleactivity(item)">
						<image src="../../static/img/img/dz.png"></image>
						{{item.address}}
					</view @click="handleactivity(item)">
					<view @click="handleactivity(item)">
						<image src="../../static/img/img/sj.png"></image>
						{{item.startTime}}
					</view>
					<view @click="handleactivity(item)">
						<image src="../../static/img/img/rmb.png"></image>
						{{item.price}}
					</view>
				</view>
				<view class="activityZt">
					<view v-if="item.state==0">
						已结束
					</view>
					<view v-else>
						参与中
					</view>
					<view @click="handleOpen(item)" class="handleOpen">
						查看详情
					</view>
				</view>
			</li>
		</ul>
		<view v-if="activityList.length==0">			<nullVue></nullVue>		</view>
		<!-- 弹窗 -->
		<uni-popup ref="popupXy" type="center" border-radius="10px 10px 0 0">
			<view class="popup">
				<view style="text-align: center;font-size: 24rpx;margin-bottom: 10rpx;padding-bottom: 10rpx;border-bottom: 1px solid #6a8473;">参加该活动人员</view>
				<view class="baominginfo" v-for="(item, index) in baominginfo">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { userInfo,baominginfo } from '@/api/api.js'
	import { getActivity } from '@/api/member.js'
	import config from '@/config'
	import nullVue from '@/components/null';
	export default {
		components:{
			nullVue
		},
		data() {
			return {
				url:config.baseUrl,
				info:{},
				activityList:[],
				hdimg:"/uploads/web/hdimg.png",
				baominginfo:[]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(){
				let that = this
					uni.getStorage({
				    key: 'data1',
				    success: function (res) {
						// 查询用户信息表中是否有该手机号
						userInfo(res.data.phone).then((userRes) => {
							that.info = userRes.info
							that.getActivity()
						  })
				    }
				});
			},
			// 活动列表
			getActivity(){
				let data = {
					phone:this.info.phone
				}
				getActivity(data).then((res) => {
					this.activityList = res.data
					for (let i = 0; i < this.activityList.length; i++) {
						this.activityList[i].price = this.activityList[i].price.replace(/\.00$/, '');
					}
				  })
			},
			// 点击跳转
			handleactivity(item){
				uni.navigateTo({
					url: '../activity/details?id='+item.id,
				});
			},
			// 弹窗
			handleOpen(item){
				console.log('item',item)
				let data = {
					zfPhone : item.zfPhone,
					hid : item.hid
				}
				console.log('data',data)
				this.$refs.popupXy.open('center')
				baominginfo(data).then((res) => {
					this.baominginfo = res.data
				  })
				
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.activityItem{
		border: 1px solid #6a8473;
		padding: 20rpx;
		font-size: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
		margin: 10rpx auto 0;
		width: 92%;
	}
	
	.activityTit{
		line-height:19px;
		font-size: 24rpx;
		color: #6a8473;
		width: 80%;
	}
	
	.activityZt{
		font-size: 25rpx;
		margin-left: auto;
		/* font-weight: bold; */
		line-height: 120rpx;
		color: #6a8473;
		text-align: center;
	}
	
	.activityTit image{
		width: 25rpx;
		height: 25rpx;
		position: relative;
		top: 4rpx;
		margin-right: 7rpx;
	}
	
	.hdimg{
		width: 100%;
		height: 570rpx;
	}
	
	.handleOpen{
		height: 40rpx;
		line-height: 40rpx;
		width: 130rpx;
		text-align: center;
		border:1px solid #6a8473;
		font-size: 24rpx;
	}
	
	.popup {
		background: #fff;
		/* height: 200rpx; */
		width: 600rpx;
		padding: 20rpx;
	}
	
	.baominginfo{
		font-size: 24rpx;
		text-align: center;
	}
</style>